import * as React from "react";
import Typography from "@material-ui/core/Typography";
import Paper from "@material-ui/core/Paper";
import Chart from 'chart.js';
import './ClusterDetail.css'
import {BaseProps} from "../../../App";
import {ServiceApi} from "../../../framework/api/ServiceApi";

interface ClusterDetailState {
    cluster: any;
    loading: boolean;
    progressValue: number;
    images: Array<any>;
    containers: Array<any>;
}
interface ClusterDetailProp extends BaseProps{
    match:any
}
export class ClusterDetail extends React.Component<ClusterDetailProp, ClusterDetailState> {
    constructor(props: ClusterDetailProp) {
        super(props);
        this.state = {
            loading: true,
            progressValue: 0,
            cluster: {},
            images: [],
            containers: []
        }
    }

    componentDidMount(): void {
        // 查询集群信息
        ServiceApi.clusterInfo(this.props.match.params.clusterId).then(res=>{
            this.setState({
                cluster: res.data.result
            })
        });

        // 加载镜像信息
        ServiceApi.images(this.props.match.params.clusterId).then(res =>{
            this.setState({
                images: res.data.result
            });
            new Chart('imageChart', {
                type: 'polarArea',
                data: {
                    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                    datasets: [{
                        label: '# of Votes',
                        data: [12, 19, 3, 5, 2, 3],
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)'
                        ],
                        borderColor: [
                            'rgba(255, 99, 132, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    },
                    maintainAspectRatio: false,
                    responsive: false
                },

            })
        });

        ServiceApi.containers(this.props.match.params.clusterId).then(res =>{
            this.setState({
                containers: res.data.result
            });
            new Chart('containerChart', {
                type: 'polarArea',
                data: {
                    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                    datasets: [{
                        label: '# of Votes',
                        data: [12, 19, 3, 5, 2, 3],
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)'
                        ],
                        borderColor: [
                            'rgba(255, 99, 132, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    },
                    maintainAspectRatio: false,
                    responsive: false
                },

            })
        });
    }

    render() {
        return <div className={'main-content'}>
            <Paper elevation={0}>
                <Typography gutterBottom variant="h5" component="h2">
                    {this.state.cluster.Name}
                </Typography>
                <Typography variant="body2" color="textSecondary" component="p">
                    系统架构：{this.state.cluster.Architecture}
                </Typography>
                <Typography variant="body2" color="textSecondary" component="p">
                    容器: {this.state.cluster.ContainersRunning}/{this.state.cluster.ContainersPaused}/{this.state.cluster.ContainersStopped}/{this.state.cluster.Containers}
                </Typography>
                <Typography variant="body2" color="textSecondary" component="p">
                    镜像: {this.state.cluster.Images}
                </Typography>
                <Typography variant="body2" color="textSecondary" component="p">
                    内存占用: {this.state.cluster.MemTotal / 1024 / 1024} MB
                </Typography>
                <Typography variant="body2" color="textSecondary" component="p">
                    版本: {this.state.cluster.ProductLicense + ' ' + this.state.cluster.ServerVersion}
                </Typography>
                <Typography variant="body2" color="textSecondary" component="p">
                    内核版本: {this.state.cluster.KernelVersion}
                </Typography>
                <Typography variant="body2" color="textSecondary" component="p">
                    操作系统: {this.state.cluster.OperatingSystem}
                </Typography>
                <Typography variant="body2" color="textSecondary" component="p">
                    系统类型: {this.state.cluster.OSType}
                </Typography>
                {/* 图表 */}
                <div className={'charts'}>
                    <canvas id="imageChart" className={'image-chart'}>asdasd</canvas>
                    <canvas id="containerChart" className={'image-chart'}>asdasd</canvas>
                </div>
            </Paper>
        </div>;
    }
}
